<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link href="./css/style_login.css" rel="stylesheet" type="text/css"/>




    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css"/>
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <style>
    .aui-code-box {
        padding: 10px 0;
        text-align: center;
    }
    body{
        background-color: white;
    }




    .login-logo {
        padding-top: 20px;
    }



    .login-logo img {
        width: 65px;
        height: 65px;
        margin: 0 auto;
        /*height: auto;*/
        border: none;
        display: block;
    }

    .login-logo h2 {
        font-size: 1.5rem;
        color: #666;
        padding-top: 0.8rem;
    }

    .aui-code-box p {
        color: #cccccc;
        font-size: 0.85rem;
        position: relative;
        width: 100%;
        background: #fff;
        padding: 0 20px;
        margin-top: 20px;
    }
    .aui-code-line {
        position: relative;
    }
    .aui-code-line:after {
        content: '';
        position: absolute;
        z-index: 0;
        bottom: 0;
        left: 20px;
        width: 90%;
        height: 1px;
        border-bottom: 1px solid #D9D9D9;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
    .aui-code-line-input {
        padding: 10px 0;
        height: 50px;
        width: 100%;
        font-size: 14px;
        background: none;
        border: none;
        color: #333;
    }
    .operate-eye-open {
        background-size: 20px;
        background-image: url('');
    }

    .operate-eye-close {
        background-size: 20px;
        background-image: url('');
    }
    .aui-show-eye {
        width: 30px;
        height: 30px;
        position: absolute;
        right: 20px;
        top: 9px;
        background-repeat: no-repeat;
        background-position: center;
    }


    .login-links {
        position: relative;
        line-height: 40px;
        margin-top: 14px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        padding: 0 20px;
    }

    .login-links > a {
        position: relative;
        text-align: left;
        display: block;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding: 0 2px;
        font-size: 0.8rem;
        color: #6d7cd9;
    }

    .login-links > a:nth-child(2) {
        text-align: right;
    }


    .aui-login-line{
        position:relative;
        text-align:center;
        padding-top:0px;
    }

    .aui-login-line h2{
        font-size:0.6rem;
        color:#bbbbbb;
        background:#fff;
        width:100px;
        margin:0 auto;
        z-index: 1002;
        position: relative;
    }

    .aui-login-line:after{
        content: '';
        position: absolute;
        z-index: 0;
        bottom: 10px;
        left: 10px;
        width: 95%;
        height: 1px;
        border-bottom: 1px solid #D9D9D9;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }

    .aui-login-armor{
        width: 70%;
        position: relative;
        z-index: 100;
        /*display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;*/
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 30px 5px 7px 5px;
        margin:0 auto;
    }

    .aui-tabBar-item {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;

        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        color: #979797;
    }

    .aui-tabBar-item img{
        width:40px;
        height:40px;
        display:block;
        border:none;
        border-radius:100%;
    }


    </style>
</head>

<script type="text/javascript" src="../../script/api.js"></script>
<script>
var basicURL = "http://1.82.238.228/api";
apiready = function() {
    // api.addEventListener({
    //     name: 'keyback'
    // }, function(ret, err) {
    //     // alert('按了返回键');
    //     api.cancelAjax({
    //         tag: 'login'
    //     });
    //     api.hideProgress();
    //
    //
    // });
}



function login(){

    var username = $api.val($api.byId('username'));
    var password = $api.val($api.byId('password'));
    if (!$api.trim(username)) {
        api.toast({
            msg: '请输入账号',
            duration: 1000,
            location: 'middle'
        });
        return;
    }

    if (!$api.trim(password)) {
        api.toast({
            msg: '请输入密码',
            duration: 1000,
            location: 'middle'
        });
        return;
    }

        /*** 加载动画 ***/
    api.showProgress({
        title : ' ',
        text : '玩命加载中...',
        modal : true
    });

    //var simInfo = api.require('simInfo');
    var phoneNumber = "111111";
    /*
    simInfo.getPhoneNumber(function(ret, err) {
        if (ret.status) {
           phoneNumber = ret.phone_number;
        } else {
            api.alert({ msg: err.msg });
            phoneNumber = "get phone number error"
        }
    });
    */

    api.ajax({
            url: basicURL+'/login/signIn/',
            timeout: 3,
            dataType: 'json',
            data:{
                body:{
                    "phone_number": phoneNumber,
                    "username": $api.trim(username),
                    "password": $api.trim(password)}
                },   //以表单方式提交参数（JSON对象）
            method: 'post',
            tag:'login'
    }, function(ret, err) {
        //alert("22");
        api.hideProgress();

        /*** 登录异常 ***/
        if (err) {
            api.toast({
      　　　　　　msg:'网络异常，请稍后重试',
      　　　　　　duration: '1300',
      　　　　　　localtion: 'middle'
    　　　　 });
            return;
        }
        if(!ret.data){
            api.toast({
      　　　　　　msg:'连接超时',
      　　　　　　duration: '1300',
      　　　　　　localtion: 'middle'
    　　　　 });
            return;
        }



        if(ret.data.message == false){
            api.toast({
            　　msg: '登录失败',
            　　duration: 1000,
            　　location: 'middle'
      　　　});
 　　　　 }else{
            if (ret.data.user_id) $api.setStorage('user_id', ret.data.user_id);

            if (ret.data.user_cookie) $api.setStorage('user_cookie', ret.data.user_cookie);
            alert(JSON.stringify(ret.data));

            var phoURL=ret.data.avatar_url;
            if (phoURL) {
                api.imageCache({
                    url: phoURL
                }, function (ret, err) {
                    phoURL = ret.url;
                });
            }
                $api.setStorage('avatar_url', phoURL);
                var delay = 0;
                if(api.systemType != 'ios'){
                    delay = 300;
                }



            api.toast({
    　　　　　　msg:'登录成功',
    　　　　　　duration: '1200',
    　　　　　　localtion: 'middle'
  　　　　　　});
            $api.setStorage('isLogin', true);
            api.sendEvent({
                name: 'UserHasLogin'
            });

            setTimeout(function() {
                api.openWin({
            　　　　name: 'index',
           　　　　 url: '../main/index.html',
            　　　　bounces: false,
           　　　　 animation:{
                　　　　type: "push",
                　　　　duration:300
            　　　　}
        　　　　});
            }, 1000);
        }


    });

}


function getPersonalInfo() {
    var personalInfo = {};
    personalInfo.name = "xx";
    personalInfo.age   = "20";


    //放入本地
    $api.setStorage('personalInfo', personalInfo);
}
function showData() {
    var personalInfo = {};
    personalInfo  =  $api.getStorage('personalInfo');
    //填充到页面 dom2内部
    $api.append(dom2, html2);



}

</script>

<!-- <script type="text/javascript">
    $('.aui-show').click(function() {
        let pass_type = $('input.password').attr('type');

        if (pass_type === 'password') {
            $('input.password').attr('type', 'text');
            $('.aui-show').removeClass('operate-eye-open').addClass('operate-eye-close');
        } else {
            $('input.password').attr('type', 'password');
            $('.aui-show').removeClass('operate-eye-close').addClass('operate-eye-open');
        }
    })
</script> -->


<body>
    <!-- <section class="aui-flexView"> -->
        <header class="aui-navBar aui-navBar-fixed">
            <!-- 左上边的返回按钮 -->
            <a href="javascript:{api.closeWin()}" class="aui-navBar-item">
                <i class="icon icon-return"></i>
            </a>

            <div class="aui-center">
                <span class="aui-center-title">登录</span>
            </div>
        </header>

        <!-- <section class="aui-scrollView"> -->
        <div class="aui-code-box">
            <div class="login-logo">
                <img src="./image/logo.png" alt="">
                <h2>校町社区</h2>
            </div>


            <p class="aui-code-line">
                <input type="text" class="aui-code-line-input" name="userName" value="" id="username" placeholder="请输入账户名"/>
            </p>
            <p class="aui-code-line ">
                <i class="aui-show-eye  operate-eye-open"></i>
                <input type="password"  name="userPassword"  id="password" class="aui-code-line-input" placeholder="请输入密码" value="">
            </p>

            <div class="aui-btn-sm aui-btn-info " onclick="login()" style="margin: 20px; padding: 10px;">   登录  </div>

            <div class="login-links">
                <a href="forgetPasswd.html">忘记密码?</a>
                <a href="register.html">立即注册</a>
            </div>
        </div>


        <div class="aui-login-line">
            <h2>合作账号登录</h2>
        </div>
        <div class="aui-login-armor">
            <a href="javascript:;" class="aui-tabBar-item">
                <img src="./image/icon-sin-001.png" alt="">
            </a>
            <a href="javascript:;" class="aui-tabBar-item">
                <img src="./image/icon-sin-002.png" alt="">
            </a>
            <a href="javascript:;" class="aui-tabBar-item">
                <img src="./image/icon-sin-003.png" alt="">
            </a>
        </div>

</body>


</html>
